<template>
  <div>
    <logo-img></logo-img>
    <b-container class="p-1 pt-lg-1 pb-lg-1 pl-lg-3 pr-lg-3">
      <b-breadcrumb class="bg-white xr-shad mt-1 mb-0">
        <b-breadcrumb-item href="/">
          <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
          萧然技术博客
        </b-breadcrumb-item>
      </b-breadcrumb>
    </b-container>
    <b-container>
      <b-row>
        <b-col class="col-lg-7 col-md-12 col-sm-12 mt-1 p-1 pl-lg-3 pr-lg-1">
          <b-card :header="keyword" header-tag="header" body-class="p-2 p-lg-3">
<!--            <el-radio-group v-model="按时间排序" size="medium">-->
<!--              <el-radio-button label="按时间排序"></el-radio-button>-->
<!--              <el-radio-button label="按热度排序"></el-radio-button>-->
<!--            </el-radio-group>-->
            <article-list :data="data.records"></article-list>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="data.total"
              :current-page="data.current"
              @current-change="handleCurrentChange"
              class="text-right mt-3">
            </el-pagination>
          </b-card>
        </b-col>
        <b-col class="col-lg-5 d-lg-block d-none mt-1 p-0 pl-lg-1 pr-lg-3">
          <article-intro :data="introdata"></article-intro>
        </b-col>
      </b-row>
    </b-container>
    <copy-info></copy-info>
  </div>
</template>
<script>
export default {
  name: 'AllAr',
  created () {
    this.searchData(1)
    this.getintrodata(10)
  },
  methods: {
    searchData: async function (currentpage) {
      const keyword = this.$route.params.keyword
      const rst = await this.axios.get('searchAr/' + keyword + '/' + currentpage)
      this.data = JSON.parse(rst.data.data)
      this.keyword = keyword
    },
    getintrodata: async function (num) {
      const rst = await this.axios.get('getIntroAr/' + num)
      this.introdata = JSON.parse(rst.data.data)
    },
    handleCurrentChange: function (rst) {
      this.allArData(rst)
      this.$route.params.page = rst
    }
  },
  data () {
    return {
      data: {},
      introdata: {},
      currentpage: 1,
      keyword: ''
    }
  }
}
</script>
<style>
  .xr-shad {
    box-shadow: 0 1px 12px #ccc;
  }
</style>
